<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function addRow() {
				var lastRow = document.getElementById("lastRow")
				var newRow = document.createElement("tr") //创建行节点
				var col1 = document.createElement("td") //创建单元格节点
				col1.innerHTML = "106" //为单元格添加文本
				var col2 = document.createElement("td")
				col2.innerHTML = "蒋涵"
				var col3 = document.createElement("td")
				col3.innerHTML = "13988888888"
				var col4 = document.createElement("td")
				col4.innerHTML = "12000"
				//把单元格添加到行节点中
				newRow.appendChild(col1)
				newRow.appendChild(col2)
				newRow.appendChild(col3)
				newRow.appendChild(col4)
				lastRow.parentNode.appendChild(newRow) //把新行节点添加到表格末尾
			}

			function copyRow() {
				var hRow = document.getElementById("hRow")
				var copyRow = hRow.cloneNode(true) //复制指定的行及子节点
				hRow.parentNode.appendChild(copyRow)
			}

			function delRow() {
				var delRow = document.getElementById("1Row")
				delRow.parentNode.removeChild(delRow)
			}
		</script>
	</head>

	<body>
		<table id="employees">
			<thead>
				<tr>
					<td>编号</td>
					<td>姓名</td>
					<td>电话号码</td>
					<td>月薪</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>100</td>
					<td>斯蒂芬</td>
					<td>1582198739</td>
					<td>2000</td>
				</tr>
				<tr>
					<td>101</td>
					<td>解决了</td>
					<td>1592198739</td>
					<td>2200</td>
				</tr>
			</tbody>
		</table>
		<p>
			<input type="button" name="addBtn" value="添加新行" onclick="addRow()" />
			<input type="button" name="copyBtn" value="复制表头行" onclick="copyRow()" />
			<input type="button" name="delBtn" value="删除数据首行" onclick="delRow()" />
		</p>
	</body>

</html>